import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import axios from 'axios';
import { Modal, Button, Input, message } from 'antd';
import './style.css';

class Login extends Component {

    constructor(props) {
        super(props);
        // 这里需要调用后台接口，判断用户是登录/非登录状态
        this.state = {
            login: false,
            model: false,
            user: '',
            password: ''
        }
        this.showModel = this.showModel.bind(this);
        this.hideModel = this.hideModel.bind(this);
        this.changeUser = this.changeUser.bind(this);
        this.changePassword = this.changePassword.bind(this);
        this.checkLogin = this.checkLogin.bind(this);
        this.logout = this.logout.bind(this);
    }

    // 点击登录按钮，将状态设为true，显示登录框
    showModel() {
        this.setState({
            model: true
        })
    }

    // 点击取消 状态设为false，退出登录框
    hideModel() {
        this.setState({
            model: false
        })
    }

    // 用户名或密码输入框数据改变
    changeUser(e) {
        // console.log(e.target.value);
        this.setState({
            user: e.target.value
        })
    }

    changePassword(e) {
        this.setState({
            password: e.target.value
        })
    }

    // 登录校验
    checkLogin() {
        const { user, password} = this.state;
        const url = `http://www.dell-lee.com/react/api/login.json?user=${user}&password=${password}`;
        axios.get(url, {
			withCredentials: true
		}).then(res => {
            // console.log(res);
            // 后台设置是 用户名和密码都为admin的时候，点击登录才成功
            const login = res.data.data.login;
            // alert(login);
            if (login) { // 成功提示
                message.success('登录成功');
                this.setState({
					login: true,
					model: false
				})
            } else { // 失败提示
                message.error('登录失败');
            }
        })
    }

    logout() {
        axios.get('http://www.dell-lee.com/react/api/logout.json', {
            withCredentials: true
        })
            .then(res => {
                const data = res.data.data;
                if( data.logout) {
                    this.setState({ 
                        login: false
                    })
                }
                // console.log(this.props)
                // 用户退出登录的时候，vip页面时返回跟路径
                this.props.history.push('/');
            })
    }

    render() {
        const { login } = this.state;
        // 如果登录状态为false，则显示为登录，否则显示退出
        return (
            <div className="login">
                {
                    login ? 
                    <Button type="primary" onClick={this.logout}>退出</Button> :
                    <Button type="primary" onClick={this.showModel}>登录</Button>
                }
                <Link to="/vip">
                    <Button type="primary" style={{marginLeft: 10}}>Vip</Button>
                </Link>
                {/* 标题，是否显示，点击确认按钮执行函数，取消按钮执行函数，内容部分 */}
                <Modal
                    title="登录"
                    visible={this.state.model}
                    onOk={this.checkLogin}
                    onCancel={this.hideModel}
                >
                    <Input placeholder="请输入用户名" style={{marginBottom: 10}}
                        onChange={this.changeUser} value={this.state.user}
                    />
                    <Input placeholder="请输入密码" type="password" 
                        onChange={this.changePassword} value={this.state.password}
                    />
            </Modal>
          </div> 
        )
    }

    componentDidMount() {
        axios.get('http://www.dell-lee.com/react/api/isLogin.json', {
            withCredentials: true
        })
            .then(res => {
                // console.log(res);
                const login = res.data.data.login;
                this.setState({ 
                    login
                 })
            })
    }
}

export default withRouter(Login);